<script setup lang="ts">
  import { init } from 'ityped'

  const content = ref<null | Element>(null)

  onMounted(() => {
    init(content.value as Element, {
      showCursor: false,
      disableBackTyping: true,
      strings: [' is not found!'],
    })
  })

  const router = useRouter()

  const back = () => router.push('/')
</script>

<template>
  <div class="wd:(flex flex-wrap h-screen text-center justify-around items-center)">
    <div class="wd:font-blod desc">
      <div class="wd:text-7xl code">404</div>
      <div ref="content" class="wd:text-3xl content">The Page</div>
      <button
          active="wd:(scale-90 transform)"
          class="wd:(rounded-lg transition btn) btn"
          @click="back"
      >
        👉 Go Home
      </button>
    </div>

    <img data-aos="slide-up" src="/notFound/404.svg" class="cover" alt="page not found"/>
  </div>
</template>

<style>
  .code {
    margin-bottom: 20px;
  }

  .content {
    height: 40px;
  }

  .cover {
    height: auto;
    width: 700px;
    margin: 0 5px;
    max-width: 100%;
    max-height: 100%;
  }

  .desc {
    flex: 1;
    width: 300px;
  }

  .btn {
    font-size: 20px;
    margin-top: 30px;
    padding: 12px 20px;
    --tw-shadow-color: 8, 145, 178;
    --tw-shadow: 0 4px 6px -1px rgba(var(--tw-shadow-color), 0.1),
    0 2px 4px -1px rgba(var(--tw-shadow-color), 0.06);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  }
</style>

<route lang="json">
  {"meta": {"layout": "empty"}}
</route>
